import { ProColumns } from "@ant-design/pro-components";
import { Tag, Tooltip, Space } from "antd";
import {
  WifiOutlined,
  DisconnectOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import { getColumnSearchProps } from "@src/Common/TableSearch";
import { TableDropdown } from "@ant-design/pro-components";

// 设备列表项类型定义
export interface DeviceListItem {
  key: string;
  mac: string;
  name?: string;
  ipAddr?: string;
  binded: boolean;
  model: string;
  version?: string;
  groupId?: string;
  [key: string]: any;
}

// 表格样式
export const buttonStyle = {
  borderRadius: "5px",
  margin: "2px",
  minWidth: "80px",
};

// 刷新频率选项
export const refreshOptions = [
  { label: "3秒", value: 3 },
  { label: "5秒", value: 5 },
  { label: "10秒", value: 10 },
  { label: "30秒", value: 30 },
  { label: "1分钟", value: 60 },
];

// 表格列定义函数
export const getColumns = (
  setExpandedRowKeys: React.Dispatch<React.SetStateAction<string[]>>,
  handleDeviceAction: (action: string, record: DeviceListItem) => void
): ProColumns<DeviceListItem>[] => [
  {
    title: "状态",
    dataIndex: "binded",
    width: 80,
    valueEnum: {
      true: { text: "在线", status: "Success" },
      false: { text: "离线", status: "Default" },
    },
    // 添加过滤功能
    filters: true,
    filtered: true,
    onFilter: (value, record) => record.binded === value,
    render: (_, record) => (
      <Tooltip title={record.binded ? "已绑定" : "未绑定"}>
        {record.binded ? (
          <Tag color="green" icon={<WifiOutlined />}>
            在线
          </Tag>
        ) : (
          <Tag color="default" icon={<DisconnectOutlined />}>
            离线
          </Tag>
        )}
      </Tooltip>
    ),
  },
  {
    title: "设备名称",
    dataIndex: "name",
    ellipsis: true,
    // 移除条件渲染，直接使用name属性，因为已在数据源中处理了默认名称
    render: (text) => text,
    ...getColumnSearchProps("name"),
    filterIcon: (filtered) => (
      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
    ),
  },
  {
    title: "MAC地址",
    dataIndex: "mac",
    copyable: true,
    ellipsis: true,
    ...getColumnSearchProps("mac"),
  },
  {
    title: "IP地址",
    dataIndex: "ipAddr",
    ellipsis: true,
    filterIcon: (filtered) => (
      <SearchOutlined style={{ color: filtered ? "#1890ff" : undefined }} />
    ),
    ...getColumnSearchProps("ipAddr"),
  },
  {
    title: "型号",
    dataIndex: "model",
    ellipsis: true,
    ...getColumnSearchProps("model"),
  },
  {
    title: "版本",
    dataIndex: "version",
    ellipsis: true,
    ...getColumnSearchProps("version"),
  },
  {
    title: "操作",
    dataIndex: "operation",
    valueType: "option",
    width: 180,
    render: (_, record) => (
      <Space>
        <a
          onClick={() => {
            setExpandedRowKeys((prevKeys) =>
              prevKeys.includes(record.key)
                ? prevKeys.filter((key) => key !== record.key)
                : [...prevKeys, record.key]
            );
          }}
        >
          详情
        </a>
        <a onClick={() => handleDeviceAction("restart", record)}>重启</a>
        <TableDropdown
          key={`dropdown-${record.mac}`}
          menus={[
            { key: "reset", name: "恢复出厂" },
            { key: "upgrade", name: "升级设备" },
            { key: "unbind", name: "解绑设备" },
          ]}
          onSelect={(key) => handleDeviceAction(key, record)}
        />
      </Space>
    ),
  },
];
